<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/plant.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../font/font.css">
    <link rel="stylesheet" href="../css/zjy.css">
    <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <script src="../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
    <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>

<body>
    <script src="../lib/jquery-1.11.3.js"></script>
    <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

    <div class="container-fluid">
        <div class="row">
            <!-- 这是侧边栏 -->
            <div id="kong" class="col-md-2"></div>
            <div id="main_menu" class="col-md-2">
                <ul id="myul">
                    <li id="logoli">
                        <div><span class="iconfont icon-shouyefill"></span><a href="../index.html">首页</a>
                        </div>
                    </li>
                    <li id="have">
                        <div><span class="iconfont icon-tongji"></span>统计</div>
                        <ul>
                            <li><a href="../pages/zx_tongji.html">种植收购统计</a></li>
                            <li><a href="../pages/saleStatistical.html">销售统计</a> </li>
                            <li><a href="../pages/dj03.html">人员统计</a> </li>
                        </ul>
                    </li>
                    <li>
                        <div><span class="iconfont icon-zhongzhiguanli"></span>种植养殖</div>
                        <ul>
                            <li><a href="../pages/plant.html">蔬果</a></li>
                            <li><a href="../pages/farming.html">肉类</a></li>
                        </ul>
                    </li>
                    <li>
                        <div><span class="iconfont icon-caigou"></span>采购收购</div>
                        <ul>
                            <li><a href="../pages/Supplier_management.html">供应商管理</a> </li>
                            <li><a href="../pages/pick_fruit.html">蔬果</a></li>
                            <li><a href="../pages/pick_meat.html">肉类</a></li>
                        </ul>

                    </li>
                    <li>
                        <div><span class="iconfont icon-yunshuzhongwuliu-xianxing"></span>运输</div>
                        <ul>
                            <li><a href="../pages/tran_meat.html">肉类运输</a></li>
                            <li><a href="../pages/tran_ve.html">蔬菜运输</a></li>
                        </ul>

                    </li>
                    <li>
                        <div><span class="iconfont icon-xinruku"></span>仓库 </div>
                        <ul>
                            <li><a href="../pages/stockIn.html">入库</a></li>
                            <li><a href="../pages/stockOut.html">出库</a></li>
                        </ul>

                    </li>
                    <li>
                        <div><span class="iconfont icon-shejishengchan"></span><a href="../pages/production.html">生产</a>
                        </div>
                    </li>
                    <li>
                        <div><span class="iconfont icon-xiaoshou"></span>销售</div>
                        <ul>
                            <li><a href="../pages/zx_xiaoshou.html">销售流通</a></li>
                            <li><a href="../pages/online_sho_by.html">网购</a></li>
                            <li><a href="../pages/online_retreate.html">网购-退换记录</a></li>
                            <li><a href="../pages/zx_pima.html">批码管理</a></li>
                        </ul>

                    </li>
                    <li>
                        <div><span class="iconfont icon-lajitong"></span><a
                                href="../pages/waste_management.html">废料去向</a></div>
                    </li>
                    <li>
                        <div><span class="iconfont icon-guanliyuan" id="logo"></span>管理</div>
                        <ul id="secondary">
                            <li><a href="../pages/dj01.html">人员管理</a> </li>
                            <li><a href="../pages/dj02.html">操作日志</a> </li>
                            <li><a href="../pages/board.html">留言板</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div id="left_content" class="col-md-10">
                <!-- 这是头 -->
                <nav id="main_headnav">
                    <div class="clear">
                        <div class="navlefspan">
                            <span class="iconfont icon-caidan" id="hidenmenu"></span>
                            <span class="mytitle">食品流通安全管理系统</span>
                        </div>
                        <div class="navrigspan">
                            <span class="iconfont icon-tixing" id="tx"></span>
                            <!-- 头像 -->
                            <img src="../images/shouye/tx.jpg" alt="">
                            <!-- 姓名 -->
                            <span id="tc">退出</span>
                        </div>
                    </div>
                    <div>
                        <!-- 这里写小的头 -->
                    </div>
                </nav>
                <div id="main_content">
                    <div id="mycentent">
                        <div id="box">
                            <div id="main">
                                <p id="mynav"><span>管理</span><span>></span><span class="mycolor2">留言板</span></p>
                                <div id="add">
                                    <span>留言板信息</span>
                                </div>
                                <div id="search" class="row ">
                                    <span>客户名称</span><input type="text" placeholder="请输入" id="uname">
                                    <span>留言时间</span><input type="date" placeholder="请输入" id="utime">
                                    <span>留言状态</span>
                                    <select id="ustate">
                                        <option value="" selected="selected">全部</option>
                                        <option value="未读">未读</option>
                                        <option value="已读">已读</option>
                                    </select>
                                    <button id="mysearch">查询</button>
                                    <button id='reset'>重置</button>
                                </div>
                                <table class="table table-bordered" id="mytable">
                                    <thead>
                                        <tr>
                                            <th>客户名称</th>
                                            <th>留言时间</th>
                                            <th>留言状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="mytbody">

                                    </tbody>
                                </table>
                            </div>
                            <div id="paging" class="clear">
                                <div>
                                    跳至
                                    <input type="text" placeholder="5" id="gopagenum">
                                    页
                                </div>
                                <div>
                                    <select name="" id="showpagenum">
                                        <option value="5">5条/页</option>
                                        <option value="10">10条/页</option>
                                        <option value="15">15条/页</option>
                                    </select>
                                </div>
                                <div class="clear" id="mypage">

                                </div>
                            </div>
                        </div>
                        <div id="motaikuang"></div>
                    </div>
                </div>
            </div>
        </div>
        <script src="../js/index.js">
        </script>

</body>
<script src="../js/plant.js"></script>
<script>
    window.onload = function () {
        let x = $("#box").width()
        $('#box').width(x)
    }
    let count = 5
    let page = 1
    showpage()
    function showpage() {
        let sql = `select * from board  WHERE b_name like '${$("#uname").val()}%' and b_time like '${$("#utime").val()}%' and b_state like '${$("#ustate").val()}%' order by b_id limit ${(page - 1) * count},${count} `
        let sql2 = `select count(*) AS total from board  WHERE b_name like '${$("#uname").val()}%' and b_time like '${$("#utime").val()}%' and b_state like '${$("#ustate").val()}%'`
        $.ajax({
            url: '/plant/get',
            data: {
                sql, sql2
            },
            success: (res) => {
                if (res.error) {
                    console.log('错误')
                } else {
                    $('#mytbody').html('')
                    $(res.data).each((index, item) => {
                        let mytime = item.b_time.substring(0, 10)
                        $("#mytbody").append(`
                        <tr>
                            <td>${item.b_name}</td>
                            <td>${item.b_time}</td>
                            <td>${item.b_state}</td>
                            <td>
                                <a href='#' onclick='mylook(this)' data-toggle='modal' data-target='#myModal' data-id=${item.b_id}>查看</a>
                                <a href='#' onclick='mydel(this,"board","b_id")' data-toggle='modal' data-target='#myModal' data-id=${item.b_id}>删除</a>
                            </td>
                        </tr>
                        `)
                    })
                    showbut(res.total, count)
                }
            },
            error: function (err) {
                console.log(err)
            }
        })
    }
    $("#mysearch").click(() => {
        page = 1
        showpage()
    })
    $("#reset").click(() => {
        $("#uname").val('')
        $("#utime").val('')
        $("#ustate").val('')
        page = 1
        showpage()
    })
    function mylook(a) {
        $('#motaikuang').html('')
        $('#motaikuang').html(`
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                    <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">留言信息</h4>
                </div>
                <div class="modal-body">
                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">否</button>
                    <button type="button" class="btn btn-primary delyes" data-dismiss="modal" onclick='confirm(${$(a).attr("data-id")})'>已读</button>
                </div>
            </div>
        </div>
    </div>
        `)
        $.ajax({
            url: '/board/look',
            data: { id: $(a).attr("data-id") },
            success: function (res) {
                console.log(res.data)
                $(".modal-body").text(`${res.data[0].b_con}`)
            },
            error: function (err) {
                console.log(err)

            }
        })
    }
    function confirm(b) {
        console.log(b)
        $.ajax({
            url: '/plant/edit',
            method: 'post',
            data: {
                sql: `UPDATE board SET b_state="已读" WHERE b_id=${b}`
            },
            success: function (res) {
                showpage()
            },
            error: function (err) {
                console.log(err)
            }
        })
    }
</script>

</html>